import React, { useState,useEffect } from 'react';
import { StyleSheet,ImageBackground, Text, View ,Image,TouchableOpacity} from 'react-native';
import {scaleSizeH,scaleSizeW,setSpText} from '../../util/ScreenUtil.js'
import Icon from "../../assets/fonts/iconfont.js";
import {get} from "../../util/Storage"
export default function Me(props) {
  // 声明一个新的叫做 “count” 的 state 变量
  const [ ] = useState(0);
  const [selectedname, setSelectedName] = useState("home");
  const [phone, setPhone] = useState({});

  function ToLogin() {
    props.navigation.navigate('Login')
  }

    props.navigation.addListener("didFocus",async()=>{
        let data=await get("user")
        setPhone(data||[])
    })
  return (
    <View style={styles.container}>
        <ImageBackground style={styles.imgBackground}
          source={require('../../resource/imgs/我的_02.png')}>
         <View style={styles.headerset}>
             <Icon name="shezhi" size={setSpText(50) } color="#fff" ></Icon>
         </View>
         <TouchableOpacity  
         onPress ={ToLogin}
         style={{height:scaleSizeH(150),marginLeft:scaleSizeW(63),flexDirection:'row',alignItems:'center'}}>
           <View style={{width:scaleSizeW(147),height:scaleSizeW(147),borderRadius:50,borderWidth:scaleSizeW(5),borderColor:"#fff"}}>
           <Image
            source={require('../../resource/imgs/80217548.jpeg')}
            resizeMode="stretch" 
            style={{width:scaleSizeW(137),height:scaleSizeW(137),borderRadius:250,}}
            />
          
           </View>
           <Text style={{marginLeft: scaleSizeW(42),fontWeight:"bold",fontSize:setSpText(38),color:"#fff",}}>{phone.phone||"请登录"}</Text>
         </TouchableOpacity>
      </ImageBackground>
      <View style={{flexDirection:"row",justifyContent:"space-between",height:scaleSizeH(84),alignItems:"center"}}>
          <View style={{borderBottomWidth:2,borderColor:"#000",...styles.nav}}>
              <Text style={{  color:"#000",fontSize:setSpText(26)}}>讨论</Text>
          </View >
          <View style={styles.nav}>
              <Text style={styles.navText}>想看</Text>
          </View>
          <View style={styles.nav}>
              <Text style={styles.navText}>在看</Text>
          </View>
          <View style={styles.nav}>
              <Text style={styles.navText}>看过</Text>
          </View>
          <View style={styles.nav}> 
              <Text style={styles.navText}>影评</Text>
          </View>
          <View style={styles.nav}>
              <Text style={styles.navText}>影人</Text>
          </View>
      </View>
        <ImageBackground
        style={{flex:1}}
        source={require('../../resource/imgs/我的_04.png')}
        >
        </ImageBackground>
      </View>
  );
}
const styles = StyleSheet.create({
    container: {
     flex: 1,
    },
    imgBackground:{
        height:scaleSizeH(360)
    },
    headerset:{
        height:scaleSizeH(105),
        justifyContent:"center",
        alignItems:"flex-end",
        marginRight: scaleSizeW(35),
    },
    nav:{
        width:scaleSizeW(124),
        height:scaleSizeH(84),
        justifyContent:"center",
        alignItems:"center",
      
    },navText:{  color:"#7e7e7e",fontSize:setSpText(26)}
  });
  Me.navigationOptions = () => {
    return {
        title: "我的",
        tabBarIcon: ({ focused }) => {
            if (focused) {
                return <Icon name="yonghu" size={20} color="green" />;
            }
            return <Icon name="yonghu" size={20} color="black" />;
        }
    };
};